<template>
   <a-row>
        <a-col :span="18">
            <span style="text-align: left;cursor:pointer;" @click="onChoose">{{component.label}}</span>
            <a-tabs type="card" v-if="tabsPane.length>0" @change="tabsChange" :activeKey="activeKey">
                <a-tab-pane v-for="(item) in tabsPane" :key="item.ref" :tab="item.label"></a-tab-pane>
            </a-tabs>
        </a-col>
      <a-col :span="6" >
        <div style="text-align: right;"><a-icon @click="onDelete" type="delete" /></div>
      </a-col>
    </a-row>
    
</template>
<script>
import pageSetting from '../pageSetting'
import {SysMixin} from '@/mixins/SysMixin'
export default {
    name:'EchLabel',
    components:{},
    mixins:[SysMixin],
    props:{
        component:{
           type:Object,
           default:()=>{}
        }, 
    },
    watch:{
        component:{
            handler(newVal){
                if(pageSetting.常量.画布组件.标签页==this.component.echoComponent){
                    this.createTabsTitle()
                }
            },
            deep:true,
        },
        
        
    },
    created(){
        if(pageSetting.常量.画布组件.标签页==this.component.echoComponent){
            this.createTabsTitle()
        }
    },
    data(){
        return{
            tabsPane:[],
            activeKey:null,
        }
    },
    

    methods:{
        onChoose(){
            this.$emit('click',this.component)
        },
        onDelete(){
            this.$emit('delete',this.component) 
        },
        createTabsTitle(){
            let refs=[]
            this.tabsPane=[]
            if(this.component.components && this.component.components.length>0){
                for(let c of this.component.components){
                    if(pageSetting.常量.画布组件.标题!=c.echoComponent){
                        this.tabsPane.push(c)
                        refs.push(c.ref)
                    }
                }
                if(!refs.includes(this.activeKey)){
                    this.activeKey = this.tabsPane[this.tabsPane.length-1].ref
                }
                this.tabsShowHide()
            }
            
        },
        tabsChange(key){
            this.activeKey=key
            this.tabsShowHide()
        },
        tabsShowHide(){
            setTimeout(() => {
                if(this.tabsPane.length>0){
                    for(let c of this.tabsPane){
                        let tabPane = this.findByRef(this.$parent,c.ref)
                        if(tabPane){
                            if(c.ref==this.activeKey){
                                tabPane.show(true)
                            }else{
                                tabPane.show(false)
                            }
                        }
                    }
                }
            }, 200);
            
        }
    }
}
</script>